<template>
    <div class="side-frame" v-bind:style="{top:top, width:width}">
        <div class="side-scroll" v-bind:style="{width:scrollWidth}">
            <div class="side-content" v-bind:style="{width:width}">
                <el-menu :default-openeds="['1', '2']" router>
                    <el-submenu index="1" v-if="authMap['xtgl']">
                        <template slot="title">
                            <i class="iconfont icon-appstore"></i>系统管理
                        </template>
                        <el-menu-item index="/user" v-if="authMap['yhgl']">用户管理</el-menu-item>
                        <el-menu-item index="/dept" v-if="authMap['zzgl']">组织管理</el-menu-item>
                        <el-menu-item index="/role" v-if="authMap['jsgl']">角色管理</el-menu-item>
                    </el-submenu>
                    <el-submenu index="2" v-if="authMap['zygl']">
                        <template slot="title">
                            <i class="iconfont icon-table"></i>资源管理
                        </template>
                        <el-menu-item index="/app" v-if="authMap['xtyy']">系统应用</el-menu-item>
                        <el-menu-item index="/resource" v-if="authMap['qxlb']">权限列表</el-menu-item>
                    </el-submenu>
                    <el-menu-item index="/log" v-if="authMap['rzgl']">日志列表</el-menu-item>
                </el-menu>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import MenuItem from './MenuItem.vue'
export default {
    props: {
        top: String,
        width: String,
        msg: String
    },
    components: {
        MenuItem
    },
    computed: {
        scrollWidth() {
            var scrollWidth = this.width.substring(this.width.length, -1);
            scrollWidth = (parseInt(scrollWidth) + 20).toString() + 'px';
            return scrollWidth;
        },
        ...mapState({
            authMap: state => state.auth.authMap
        }),
    }
}
</script>

<style scoped>
.side-frame {
    position: fixed;
    top: 50px;
    bottom: 0;
    width: 200px;
    overflow-x: hidden;
}

.side-scroll {
    position: relative;
    width: 220px;
    height: 100%;
    overflow-x: hidden;
}

.side-content {
    position: relative;
    width: 200px;
}

.el-menu {
    border-right: none;
}

.side-content /deep/ .el-submenu {
    font-size: 12px;
}
.side-content /deep/ .el-menu-item {
    font-size: 13px;
    padding-left: 0;
}
@import '../assets/theme1/sidemenu.css';
</style>